<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>jQuery轻量级圆形进度指示器插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link href="css/base.css"  rel="stylesheet" type="text/css" />
	<link href="css/project_base.css"  rel="stylesheet" type="text/css" />
    <link href="css/radialindicator.css"  rel="stylesheet" type="text/css" />
    <style type="text/css">
		.htmleaf-icon{color: #fff;}
    </style> 
</head>
<body>
	<div class="htmleaf-container">
		<!--<header class="htmleaf-header bgcolor-12">
			<h1>jQuery轻量级圆形进度指示器插件 <span>A simple and light weight circular indicator plugin</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-home" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-arrow-right3" href="http://www.htmleaf.com/jQuery/Layout-Interface/201502171389.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		
		<div id="bodyContent">
       		 <div class="wrapper">

    <div id="sideContent">
        <div id="intro">
            <h2 class="experiment-title">
        radialIndicator
      </h2>
            <p>
                radialIndicator is a simple and light weight circular indicator plugin. It supports color range, interpolation, formatting, percentage value and much more, and is easy to configure and update after initialization. And it do work well with jQuery and angular js .
            </p>
            <h3>How to use?</h3>
            Include jquery [optional] and radialIndicator.js.
            <pre class="brush: xml;">
    &lt;script src=&quot;radialIndicator.js&quot;&gt;&lt;/script&gt;
</pre>
            
        </div>
        <div id="example">
            A simple initialization.
            <div class="prg-cont rad-prg" id="indicatorContainer"></div>
            <pre class="brush: js;">
        $('#indicatorContainer').radialIndicator();
    </pre>
            <p>
                In this first argument is configuration parameters [Optional], Lets see a example with configuration.
            </p>-->
            <div class="prg-cont rad-prg" id="indicatorContainer2"></div>
            
    <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<script type="text/javascript"  src="js/base.js"></script>
	<script type="text/javascript"  src="js/project_base.js"></script>	
    <script>
        	SyntaxHighlighter.defaults['toolbar'] = false;
			SyntaxHighlighter.all();
			$(function(){
				//radial progress 2
    $('#indicatorContainer2').radialIndicator({
        barColor: '#87CEEB',
        barWidth: 10,
        initValue: 60,
        roundCorner: true,
        percentage: true
    });
			})
    </script>

    <script src="js/radialindicator.js"></script>
    <!--<script src="js/demo.js"></script>-->
</body>
</html>